/*
 * @Author: xiangrikui 1755283163@qq.com
 * @Date: 2024-06-19 00:11:17
 * @LastEditors: xiangrikui 1755283163@qq.com
 * @LastEditTime: 2024-06-21 10:43:29
 * @FilePath: \项目\src\pages\Register\index.tsx
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */
import React from 'react';
import { Form, Input, Button, Row, Col } from 'antd';
import { MailOutlined, LockOutlined, SafetyCertificateOutlined } from '@ant-design/icons';
import './index.less';
import { reset } from '@/services/demo/reset';
import {smsCaptcha } from '@/services/demo/smsCaptcha';

const RegistrationForm = () => {
  const onFinish =async (value) => {
    console.log(value.email+"密码"+value.userPassword);
      try {
        const res = await reset( value.email,value.userPassword,value.checkPassword,value.emailCode);
        if (res.data.id){
          console.log('reste successful:', res.data);
        window.location.href = '/login'; 
        // 处理密码重置成功后的逻辑，比如跳转页面等
        } else{
          console.log('reset failed');
        }
      } catch (error) {
        console.error('reset failed:', error);
        // 处理密码重置失败的逻辑
    console.log(value);
  }
  };


//邮箱验证码

const code1 = async (value)=>{
  console.log(value.email+"邮箱");
    try {
      const res = await smsCaptcha( value.email);
    if (res.message ==='Ok'){
    // 处理成功后的逻辑，比如跳转页面等
      console.log('发送成功',res);
      message.success('验证码已发送成功！'); 
    }else{
      console.log('发送失败');
      message.error('验证码已发送失败！'); 
    }
      
    } catch (error) {
      console.error('发送失败', error);
      // 处理失败的逻
  console.log(value);
}
};

  const onFinishFailed = (errorInfo) => {
    console.log('Failed:', errorInfo);
  };

  return (

    <div className="box1"> 
    <Form
      name="registration_form"
      onFinish={onFinish}
      onFinishFailed={onFinishFailed}
      style={{ maxWidth: 400}}
    >
    <h1 style={{marginLeft:130}}>重置密码</h1>
     <div style={{marginTop:10,marginLeft:40,marginRight:40}}>
      <Form.Item
        name="email"
        rules={[
          { required: true, message: '请输入邮箱地址!' },
          { type: 'email', message: '请输入有效的邮箱地址!' },
        ]}
      >
        <Input prefix={<MailOutlined />} placeholder="邮箱" />
      </Form.Item>

      <Form.Item
        name="userPassword"
        rules={[{ required: true, message: '请输入密码!' }]}
      >
        <Input.Password prefix={<LockOutlined />} placeholder="密码" />
      </Form.Item>

      <Form.Item
        name="checkPassword"
        dependencies={['userPassword']}
        hasFeedback
        rules={[
          { required: true, message: '请确认密码!' },
          ({ getFieldValue }) => ({
            validator(_, value) {
              if (!value || getFieldValue('userPassword') === value) {
                return Promise.resolve();
              }
              return Promise.reject(new Error('两次输入的密码不一致!'));
            },
          }),
        ]}
      >
        <Input.Password prefix={<LockOutlined />} placeholder="确认密码" />
      </Form.Item>

      <Form.Item
        name="emailCode"
        rules={[{ required: true, message: '请输入邮箱验证码!' }]}
      >
        <Row gutter={8}>
          <Col span={16}>
            <Input prefix={<SafetyCertificateOutlined />} placeholder="邮箱验证码" />
          </Col>
          <Col span={8}>
            {/* 这里可以加入获取验证码的逻辑 */}
            <Button  onClick={code1}>获取验证码</Button>
          </Col>
        </Row>
      </Form.Item>

      <Form.Item>
        <Button type="primary" htmlType="submit" style={{ width: '100%' }}>
          登录
        </Button>
      </Form.Item>
      </div>
    </Form>
    </div>
  );
};

export default RegistrationForm;
